<template>
  <div>
    <h4 class="font-weight-bold">
        <span class="text-muted font-weight-light">事件消息 /</span> 系统消息
    </h4>
    <b-card class="mb-4">
        <div class="card-content">
            <Table :data="table.data" :columns="table.columns"  :loading="table.loading"  stripe border class="mt-2"></Table>
            <Page show-elevator show-total size="small" class="mt-2" 
            :total="table.total" 
            :page-size="table.pageSize"  
            :current="table.currentPage" @on-change="(pageNum) => {
                            let self = this;
                            table.pageChange.call(self,pageNum);
                        }"></Page>
        </div>
    </b-card>
  </div>
</template>

<script>
import Vue from "vue";
import Axios from "axios";
// import expandRow from "./table-expand.vue";

function padLeftZero(str) {
    return ("00" + str).substr(str.length);
}

function formatDate(longStr, fmt) {
    let date = new Date(longStr);

    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
            RegExp.$1,
            (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
    }
    let o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds()
    };
    for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
            let str = o[k] + "";
            fmt = fmt.replace(
                RegExp.$1,
                RegExp.$1.length === 1 ? str : padLeftZero(str)
            );
        }
    }
    return fmt;
}

export default {
    name: "eventMessageMessage",
    metaInfo: {
        title: "事件消息 - 消息"
    },
    data() {
        return {
            table: {
                // 表格数据
                data: [],
                // 表格列配置
                columns: [
                    {
                        title: "消息",
                        key: "message"
                    },
                    {
                        title: "消息来源",
                        width: 100,
                        align: 'center',
                        key: "messageSource"
                    },
                    {
                        title: "创建时间",
                        key: "createDate",
                        width: 160,
                        align: "center",
                        render: (h, params) => {
                            let fmtDate = formatDate(
                                params.row.createDate,
                                "yyyy-MM-dd hh:mm:ss"
                            );
                            return <div>{fmtDate}</div>;
                        }
                    },
                    {
                        title: "操作",
                        key: "name",
                        width: 180,
                        align: "center",
                        render: (h, params) => {
                            let vm = this;
                            return (
                                <div>
                                    <i-button
                                        type="text"
                                        size="small"
                                        class="mr-2"
                                        shape="circle"
                                        icon="document-text"
                                        onClick={() => {
                                            return vm.viewResult(params);
                                        }}
                                    />
                                </div>
                            );
                        }
                    }
                ],
                // 是否载入中
                loading: false,
                // 总页数
                total: 0,
                // 当前页数
                currentPage : 1,
                // 每页条目数
                pageSize : 10,
                // 分页切换
                pageChange: function(pageNum){
                    let self = this;
                    self.table.currentPage = pageNum;
                    self.loadTable().then(function(res){
                        if(res.data){
                            self.table.data = res.data.data ? res.data.data : [];
                        }
                    });
                }
            }
        };
    },
    filters: {
        formatDate(time) {
            var date = new Date(time);
            return formatDate(date, "yyyy-MM-dd");
        }
    },
    created() {
        let self = this;
        
    },
    mounted(){
        let self = this;
        //加载客户列表
        self.loadTable().then(function(res){
            // console.log(res);
            if(res.data){
                self.table.data = res.data.data ? res.data.data : [];
            }
        });
    },
    methods: {
        loadTable(){
            let self = this;
            self.table.loading = true;

            return new Promise(function(resolve,reject){
                self.$http
                    .get('/app/v1/sysMessages',{
                        params: {
                            pageSize: self.table.pageSize,
                            currentPage: self.table.currentPage
                        }
                    })
                    .then(function(res) {
                        self.table.total = res.data.recordCount;
                        self.table.loading = false;
                        resolve(res);
                    },function(res){
                        self.table.loading = false;
                        reject(res);
                    });
            });
        },
        viewResult: function(params) {
            let self = this;
            self.$router.push({
                path: "/eventMessage/messageDetail",
                query: {
                    batchNo: params.row.batchNo
                }
            });
        }
    }
};
</script>